<template>
    <div>
        <div style="width: 100%;padding: 10px;display: flex;">
            <div style="width: 30%;height: 380px;">
                <div class="box1">
                    <div class="box3">
                        <div class="box4"><a-icon type="gold" theme="twoTone" />服务总数</div><div class="box5">{{servicedata.total}}</div>
                    </div>
                    <div class="box9">
                        <div class="box6"><div class="box7">发布</div><div class="box8">{{ servicedata.online }}</div></div>
                        <div class="box6"><div class="box7">下线</div><div class="box8">{{ servicedata.outline }}</div></div>
                        <div class="box6"><div class="box7">调用总数</div><div class="box8">{{ servicedata.logCount }}</div></div>
                        <div class="box6"><div class="box7">平均耗时</div><div class="box8">{{ servicedata.time }}&nbsp;ms</div></div>
                    </div>
                </div>
                <div class="box1">
                    <div class="box3">
                        <div class="box4"><a-icon type="folder-open" theme="twoTone" />应用总数</div><div class="box5">{{appdata.appCount}}</div>
                    </div>
                    <div class="box9">
                        <div class="box6"><div class="box7">授权接口</div><div class="box8">{{appdata.apiCount}}</div></div>
                        <div class="box6"><div class="box7">调用成功率</div><div class="box8">{{appdata.success*100}}%</div></div>
                    </div>
                </div>
            </div>
            <div class="box2">
                <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">调用量统计</el-menu-item>
                    <el-menu-item index="2">调用次数统计</el-menu-item>
                </el-menu>
                <span v-if="activeIndex==1">
                    <div style="position: absolute;right: 0;z-index: 100;">
                        <el-date-picker
                        v-model="dateRange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="onChange"
                        @ok="onOk">
                    </el-date-picker>
                    </div>
                    <div style="width: 100%;height: 80%;">
                        <amount :Day="day" :DayFail="dayfail" :DaySuccess="daysuccess"></amount>
                    </div>
                </span>
                <span v-else-if="activeIndex==2">
                    <div style="width: 100%;height: 80%;display: flex;padding: 10px;">
                        <div style="width: 49%;height: 100%;margin-right: 20px;">
                            <service :ServiceCountList="serviceCountList" :ServiceNameList="serviceNameList"></service>
                        </div>
                        <div style="width: 49%;height: 100%;">
                            <app :AppCountList="appCountList" :AppNameList="appNameList"></app>
                        </div>
                    </div>
                </span>
            </div>
        </div>
        <div>
            <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect2">
                <el-menu-item index="1">服务监控</el-menu-item>
                <el-menu-item index="2">应用监控</el-menu-item>
            </el-menu>
            <span v-if="activeIndex2=='1'">
                <div>
                    <el-container>
                        <el-aside  class="asidemain" :class="{asidemainshow:!asideStatus}">
                          <el-row>
                            <el-col :span="22">
                              模块目录
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-input v-model="filterText" suffix-icon="el-icon-search" placeholder="请输入" />
                          </el-row>
                          <el-row>
                            <el-tree ref="tree"  class="filter-tree" :data="contentsData" :filter-node-method="filterNode" @node-click="handleNodeClick" :props="setProps">
                              <span slot-scope="{ node, data }">
                                <i v-if="data.children.length == 0" class="el-icon-folder" />
                                <i v-else class="el-icon-folder-opened" />
                                <span style="margin-left: 10px">{{ node.label }}</span>
                              </span>
                            </el-tree>
                          </el-row>
                        </el-aside>
                        <el-container style="position: relative;">
                          <el-header style="height: 50px;">
                            <el-form :model="queryservice" ref="serviceForm" size="small" :inline="true" style="margin: 10px 0;">
                                <el-form-item label="接口名称" prop="apiName">
                                    <el-input v-model="queryservice.apiName" placeholder="请输入接口名称" style="width: 130px;"/>
                                </el-form-item>
                                <el-form-item label="接口中文名称" prop="apiCname">
                                    <el-input v-model="queryservice.apiCname" placeholder="请输入接口中文名称" style="width: 150px;"/>
                                </el-form-item>
                                <el-form-item label="接口状态" prop="apiStatus">
                                    <el-select v-model="queryservice.apiStatus" style="width: 85px;" >
                                        <el-option label="全部" :value=null></el-option>
                                        <el-option label="发布" value="1"></el-option>
                                        <el-option label="下线" value="2"></el-option>
                                      </el-select>
                                </el-form-item>
                                <el-form-item label="平均调用时长" prop="minTime">
                                    <el-input v-model="queryservice.minTime" placeholder="最小值" style="width:70px;"/>—
                                </el-form-item>
                                <el-form-item prop="maxTime">
                                    <el-input v-model="queryservice.maxTime" placeholder="最大值" style="width:70px;"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="handleservice">查询</el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="resetservice">重置</el-button>
                                </el-form-item>
                            </el-form>
                          </el-header>
                          <!-- aside侧边栏按钮 -->
                          <div class="asideopenclose"  @click="asidechange">
                            <i class="el-icon-arrow-left" v-if="aside_open_close"></i>
                            <i class="el-icon-arrow-right" v-else></i>
                        </div>
                          <!-- 服务监控表格 -->
                          <div style="width: 98%;margin-left: 20px;margin-right: auto;">
                            <el-table v-loading="loading2" :data="servicelist" border max-height="500">
                                <el-table-column type="index" :index="serviceindexMethod"></el-table-column>
                                <el-table-column label="接口名称" prop="apiName" width="110"></el-table-column>
                                <el-table-column label="接口请求地址"  prop="requestUrl" />
                                <el-table-column label="状态"  prop="apiStatus" width="70">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.apiStatus==1">
                                        <div style="display: flex;align-items: center;">
                                            <div style="width: 10px;height: 10px;border-radius: 50%;background-color: rgb(3,191,22)">
                                            </div>
                                            发布
                                        </div></span>
                                        <span v-else>
                                            <div style="display: flex;align-items: center;">
                                                <div style="width: 10px;height: 10px;border-radius: 50%;background-color: rgb(127,127,127)">
                                                </div>
                                                下线
                                            </div>
                                        </span>
                                      </template>
                                </el-table-column>
                                <el-table-column label="最长调用时长(ms)"  prop="maxTime" width="130"></el-table-column>
                                <el-table-column label="最短调用时长(ms)"  prop="minTime" width="130"></el-table-column>
                                <el-table-column label="平均调用时长(ms)"  prop="avgTime" width="130"></el-table-column>
                                <el-table-column label="调用次数"  prop="executeCount" width="75"></el-table-column>
                                <el-table-column label="调用成功率"  prop="success" width="90">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.success*100}}%</span>
                                      </template>
                                </el-table-column>
                              </el-table>
                            <!--服务监控表格分页-->
                            <div style="height: 80px;position: relative;">
                                <el-pagination
                                    @size-change="serviceSizeChange"
                                    @current-change="serviceCurrentChange"
                                    :current-page.sync="servicepage.currentPage"
                                    :page-sizes="[10,20,50,100]"
                                    :page-size="servicepage.pageSize"
                                    layout="total, prev, pager, next, sizes"
                                    :total="servicepage.total"
                                    style="position: absolute;right:0;margin-top: 10px;" >
                            </el-pagination>
                            </div>
                          </div>
                        </el-container>
                      </el-container>
                </div>
            </span>
            <span v-else-if="activeIndex2=='2'">
                <!-- 应用的搜索条件 -->
                <div style="width: 100%;height: 60px;padding:10px;">
                    <el-form :model="queryapp" ref="appForm" :inline="true">
                        <el-form-item label="应用名称" prop="name">
                                <el-input v-model="queryapp.name" placeholder="请输入应用名称"/>
                            </el-form-item>
                            <el-form-item label="联系人" prop="contact">
                                <el-input v-model="queryapp.contact" placeholder="请输入联系人"/>
                            </el-form-item>
                            <el-form-item label="平均调用时长" prop="minTime">
                                <el-input v-model="queryapp.minTime" placeholder="最小值" style="width:80px;"/>—
                            </el-form-item>
                            <el-form-item prop="maxTime">
                                <el-input v-model="queryapp.maxTime" placeholder="最大值" style="width:80px;"/>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleapp">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="resetapp">重置</el-button>
                            </el-form-item>
                      </el-form>
                </div>
                
                <!-- 应用监控表格数据 -->
                <el-table v-loading="loading" :data="applist" border max-height="400">
                    <el-table-column type="index" :index="indexMethod"></el-table-column>
                    <el-table-column label="应用名称" prop="name"></el-table-column>
                    <el-table-column label="AppId"  prop="appId" />
                    <el-table-column label="secKey"  prop="secKey"></el-table-column>
                    <el-table-column label="接口数量"  prop="apiCount" width="90">
                        <template slot-scope="scope">
                            <el-link type="primary" :underline="false"  @click="openapi(scope.row)" >{{scope.row.apiCount}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="总调用次数"  prop="executeCount" width="100"></el-table-column>
                    <el-table-column label="平均调用时长(ms)"  prop="avgTime" width="150"></el-table-column>
                    <el-table-column label="调用成功率"  prop="success" width="90">
                        <template slot-scope="scope">
                            {{scope.row.success*100}}%
                        </template>
                    </el-table-column>
                  </el-table>

                  <div style="height: 80px;position: relative;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[10,20,50,100]"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, sizes"
                        :total="total"
                        style="position: absolute;right: 0;margin-top: 10px;" >
                        </el-pagination>
                  </div>
                    
                <!-- 应用监控的接口详情的表格数据 -->
                <el-dialog :title="title" :visible.sync="open" width="1000px">
                    <el-table :data="apilist" border>
                      <el-table-column type="index" :index="apiindexMethod"></el-table-column>
                      <el-table-column label="接口名称" prop="apiName" width="150"></el-table-column>
                      <el-table-column label="请求接口地址" prop="requestUrl"></el-table-column>
                      <el-table-column label="所属模块" prop="moduleCname" width="120"></el-table-column>
                      <el-table-column label="调用次数" prop="executeCount" width="120"></el-table-column>
                      <el-table-column label="平均调用时长(ms)" prop="avgTime" width="150"></el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="apiSizeChange"
                        @current-change="apiCurrentChange"
                        :current-page.sync="apipage.currentPage"
                        :page-sizes="[10,20,50,100]"
                        :page-size="apipage.pageSize"
                        layout="total, prev, pager, next, sizes"
                        :total="apipage.total"
                        style="position: absolute;right:0;margin-bottom: 10px;" >
                        </el-pagination>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="open = false">关闭</el-button>
                      </div>
                  </el-dialog>
            </span>
        </div>
    </div>
</template>
<script>
import amount from '../ant-sermonitor/components/amount';
import service from '../ant-sermonitor/components/service';
import app from '../ant-sermonitor/components/app';
import moment from 'moment';
import { servicedataget,Amountdataget,appdataget,Topdataget,Applist,Apilist,Servicelist } from '@/api/system/outapi/sermonitor';
import { listModule } from '@/api/system/outapi/manage';

export default {
    components:{
        amount,
        service,
        app,
    },
    data() {
    return {
        //侧边栏状态
        asideStatus:true,
        aside_open_close:true,
        // 目录搜索关键字
        filterText: null, 
        //服务监控表格
        servicelist:[],
        //树结构
        setProps: {
            label: 'moduleCname',
            children: 'children',
            showPop: false
        },
        //目录数据
        contentsData: [], 
        //服务监控表格遮罩层
        loading2:false,
        //应用数据
        appdata:{
            appCount:null,
            success:null,
            apiCount:null,
        },
        //服务数据
        servicedata:{
            logCount:null,
            total:null,
            outline:null,
            online:null,
            time:null,
        },
        //日期选择
        params: {
            startTime: [moment().subtract(7, 'days').startOf('day')],
            endTime: [moment().endOf('day')],
        },
        dateRange:[],
        //调用次数top5图表
        serviceCountList:null,
        serviceNameList:null,
        appCountList:null,
        appNameList:null,
        //统计调用量图表
        day: null,
        dayfail: null,
        daysuccess: null,
        //选择时间
        pickerOptions:{
            shortcuts: [
          {
            text: '近七天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(0);
              start.setTime(end.getTime() - 3600 * 1000*24*8+1000 );
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '近十五天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(0);
              start.setTime(end.getTime() - 3600 * 1000*24*16+1000 );
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '近三十天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(0);
              start.setTime(end.getTime() - 3600 * 1000*24*31+1000 );
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //弹出层标题
        title:'',
        // 是否显示弹出层(应用监控的接口详情)
        open: false,
        //遮罩层
        loading: true,
        //应用监控的表格数据
        applist:[],
        //应用监控的接口详情表格数据
        apilist:[],
        //切换调用量图表与调用次数图表
        activeIndex:'1',
        //切换服务监控和应用监控
        activeIndex2:'1',
        //服务监控的查询参数
        queryservice:{
            moduleId:null,
            pageNum:'1',
            pageSize:'10',
            apiStatus:null,
            apiName:null,
            apiCname:null,
            minTime:null,
            maxTime:null,
        },
        //服务监控的分页参数
        servicepage:{
            total:0,
            currentPage:1,
            pageSize:10,
        },
        //应用监控的查询参数
        queryapp:{
            pageNum:'1',
            pageSize:'10',
            name:null,
            contact:null,
            minTime:null,
            maxTime:null,
        },
        // 应用监控表格分页参数
        total:0,
        currentPage: 1, 
        pageSize: 10, 
        //接口详情的查询参数
        queryapi:{
            id:null,
            pageNum:'1',
            pageSize:'10',
        },
        //接口分页参数
        apipage:{
            total:0,
            currentPage:1,
            pageSize:10,
        }
    };
    },
    watch: {
        filterText(val) {
        this.$refs.tree.filter(val)
        }
    },
    created() {
      this.seventime();
      this.getServicedata();
      this.getAppdata();
      this.getTopdata();
      this.params.startTime=this.$moment(this.params.startTime[0]).format('YYYY-MM-DD HH:mm:ss');
      this.params.endTime=this.$moment(this.params.endTime[0]).format('YYYY-MM-DD HH:mm:ss');
      this.getAmountdata(this.params);
      this.getappList();
      this.getModuleData();
      this.getserviceList();
    },
    methods: {
        //侧边栏收起
        asidechange(){
            this.asideStatus = !this.asideStatus 
        if(this.asideStatus){
            this.aside_open_close =true
        }else{
            this.aside_open_close =false
        }
        },
        handleNodeClick(data) { // 点击目录节点
            this.queryservice.moduleId = data.id
            this.queryservice.pageNum='1';
            this.queryservice.pageSize='10';
            this.servicepage.currentPage=1;
            this.servicepage.pageSize=10;
            this.getserviceList();
    },
        filterNode(value, data) {
            if (!value) return true
            return data.moduleCname.indexOf(value) !== -1
    },
        getModuleData() { // 获取目录数据
            listModule().then(response => {
            this.contentsData = response.rows
      })
    },
        //服务监控表格索引
        serviceindexMethod(index){
            if(((this.servicepage.currentPage-1)*this.servicepage.pageSize+index+1)>index+1){
                return (this.servicepage.currentPage-1)*this.servicepage.pageSize+index+1
            }
            return index+1
        },
        //应用监控表格索引
        indexMethod(index){
            if(((this.currentPage-1)*this.pageSize+index+1)>index+1){
                return (this.currentPage-1)*this.pageSize+index+1
            }
            return index+1
        },
        //接口详情表格索引
        apiindexMethod(index){
            if(((this.apipage.currentPage-1)*this.apipage.pageSize+index+1)>index+1){
                return (this.apipage.currentPage-1)*this.apipage.pageSize+index+1
            }
            return index+1
        },
        //重置服务监控表单
        resetserviceform(){
            this.queryservice={
                moduleId:null,
                pageNum:'1',
                pageSize:'10',
                apiStatus:null,
                apiName:null,
                apiCname:null,
                minTime:null,
                maxTime:null,
            }
            this.servicepage={
                total:0,
                currentPage:1,
                pageSize:10,
        }
        },
        //重置应用监控表单
        resetappform(){
            this.queryapp={
                pageNum:'1',
                pageSize:'10',
                name:null,
                contact:null,
                minTime:null,
                maxTime:null,
            }
            this.total=1;
            this.currentPage=1;
            this.pageSize=10; 
        },
        //重置接口详情表单
        resetapi(){
            this.queryapi={
                id:null,
                pageNum:'1',
                pageSize:'10',
            }
            this.apipage={
            total:0,
            currentPage:1,
            pageSize:10,
        }
        },
        //获取接口详情表格
    getapiList(){
        Apilist(this.queryapi).then(response=>{
            this.apilist = response.rows;
            this.apipage.total=response.total;
        })
    },
        //获取近七天时间
    seventime(){
        const end = new Date();
        const start = new Date();
        end.setHours(23);
        end.setMinutes(59);
        end.setSeconds(59);
        end.setMilliseconds(0);
        start.setTime(end.getTime() - 3600 * 1000*24*8+1000 );
        this.dateRange[0]=start;
        this.dateRange[1]=end;
    },
    //每页条数改变
    handleSizeChange(val) {
        this.queryapp.pageSize=val
        this.pageSize = val
        this.getappList()
    },
    //当前页面变化
    handleCurrentChange(val) {
        this.queryapp.pageNum=val
        this.current = val;
        this.getappList();
    },
    //接口每页条数改变
    apiSizeChange(val) {
       this.queryapi.pageSize=val
       this.apipage.pageSize = val
       this.getappList()
    },
    //接口当前页面变化
    apiCurrentChange(val) {
      this.queryapi.pageNum=val
      this.apipage.current = val;
      this.getappList();
    },
    //服务每页条数改变
    serviceSizeChange(val) {
       this.queryservice.pageSize=val
       this.servicepage.pageSize = val
       this.getserviceList()
    },
    //服务当前页面变化
    serviceCurrentChange(val) {
      this.queryservice.pageNum=val
      this.servicepage.current = val;
      this.getserviceList();
    },
    //切换服务监控和应用监控
    handleSelect2(key){
        this.activeIndex2=key;
    },
    //切换显示图表
    handleSelect(key) {
        this.activeIndex=key;
    },
    //获取应用数据
    getAppdata(){
        appdataget().then(response=>{
            this.appdata=response.data
        })
    },
    //获取调用量统计(图表)
    getAmountdata(){
        if(this.params.startTime==''||this.params.startTime==''){

            }
        else {
            Amountdataget(this.params).then(response =>{
                this.day = response.data.dayList
                this.dayfail = response.data.failList
                this.daysuccess = response.data.successList
        })
        }
    },
    //获取top5数据(图表)
    getTopdata(){
        Topdataget().then(response=>{
            this.serviceCountList=response.data.serviceCountList.reverse()
            this.serviceNameList=response.data.serviceNameList.reverse()
            this.appCountList=response.data.appCountList.reverse()
            this.appNameList=response.data.appNameList.reverse()
        })
    },
    //获取服务数据
    getServicedata(){
        servicedataget().then(response=>{
            this.servicedata=response.data
        })
    },
    //日期选择按下确定
    onOk(value) {
      this.getAmountdata();
    },
    //日期改变时
    onChange(value) {
      this.params.startTime = value[0]
      this.params.endTime = value[1]
      this.getAmountdata();
    },
    //打开应用监控的接口详情
    openapi(row){
        this.resetapi();
        this.queryapi.id=row.id;
        this.getapiList();
        this.open=true;
        this.title='接口详情';
    },
    // 服务监控的查询列表 
    getserviceList() {
    this.loading2 = true;
    Servicelist(this.queryservice).then(response => {
        this.servicelist = response.rows;
        this.servicepage.total = response.total;
        this.loading2 = false;
    });
    },
    // 应用监控的查询列表 
    getappList() {
    this.loading = true;
    Applist(this.queryapp).then(response => {
        this.applist = response.rows;
        this.total = response.total;
        this.loading = false;
    });
    },
    //应用监控的查询按钮
    handleapp(){
        this.getappList();
    },
    // 应用监控的重置按钮 
    resetapp() {
        this.resetappform();
        this.handleapp();
    },
    //服务监控的查询按钮
    handleservice(){
        this.getserviceList();
    },
    //服务监控的重置按钮
    resetservice(){
        this.resetserviceform();
        this.handleservice();
    }
}
};
</script>
<style>
.box1{
    height: 180px;
    margin: 10px;
    background: linear-gradient(to right,rgb(230,237,249),rgb(240,244,252),rgb(253,254,255));
    border-radius: 7px;
    box-shadow:5px 5px 3px rgb(214, 212, 212);
}
.box2{
    position: relative;
    width: 78%;
    height: 370px;
    background: linear-gradient(to right,rgb(230,237,249),rgb(240,244,252),rgb(253,254,255));
    margin: 10px;
    border-radius: 7px;
    box-shadow:5px 5px 3px rgb(214, 212, 212);
}
.box3{
    width: 100%;
    height: 60px;
    display: flex;
}
.box4{
    width:50%;
    font-size:20px;
    font-weight: bolder;
    line-height: 60px;
    padding: 20px;
}
.box5{
    width:50%;
    font-size:30px;
    font-weight: bolder;
    line-height: 60px;
    padding: 20px;
}
.box9{
    width: 100%;
    height: 100px;
    display: flex;
}
.box6{
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: aqua; */
    margin: 20px 20px;
}
.box7{
    width: 80px;
    height: 50%;
    line-height: 60px;
    color: rgb(176,177,177);
}
.box8{
    width: 60px;
    height: 50%;
    font-weight: bolder;
}
.asidemain{
    width: 240px !important;
}
.asidemainshow{
    display: none;
}
.asideopenclose{
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 60px;
    line-height: 60px;
    color: rgb(131,159,163);
    background-color: white;
    border-radius: 0 6px 6px 0;
    border: 1px rgb(231,231,231) solid;
    font-size: 20px;
    z-index: 1000;
    cursor: pointer;
}
</style>